<template>
  <div class="flex-col page">
    <div class="flex-col section">
      <div class="flex-col">
        <div class="flex-row relative" >
          <div class="flex-row flex-1">
            <van-icon @click="goBack" name="arrow-left" size="16px" style="display"/>
          </div>
          <div class="flex-row flex-1 justify-center">
            <span class="font text">诺丽果区</span>
          </div>
          <!-- <span></span> -->
          <div class="flex-row flex-1 justify-end">
            <div class="jimai" @click="toNlgMingxi" style="margin-right: 25px;">明细</div>
            <div class="jimai" v-if="tabId == 0" @click="commission">我要寄卖</div>
            <div class="jimai" v-if="tabId == 1" @click="qiugouClick">我要求购</div>
          </div>
        </div>
        <div class="flex-row items-center shrink-0">
          <van-tabs v-model="tabId" @click="onClick">
            <van-tab id="1" title="买入" class="text">
              <div class="flex-col relative qwe">
                <div class="flex-col list-item mt-15" v-for="(item, index) in items" :key="index">
                  <div class="flex-row justify-between">
                    <span class="font">{{ item.num }}个诺丽果</span>
                    <span class="font_2">{{ item.shiji_jifen }}购物积分</span>
                  </div>
                  <div class="mt-10 flex-row justify-between">
                    <div class="flex-row items-center self-start">
                      <img class="shrink-0 image_4" src="https://shops.cg500.com/static/newimg/17108378647117336336.png" />
                      <span class="font_3 ml-4-5">{{ item.time }}</span>
                    </div>
                    <div class="flex-col justify-start items-center text-wrapper button" @click="buy(item.id, item)"><span class="font_4">立即购买</span></div>
                  </div>
                </div>
              </div>
            </van-tab>
            <van-tab id="2" title="卖出" class="text">
              <div class="flex-col relative qwe">
                <div class="flex-col list-item mt-15" v-for="(item, index) in items" :key="index">
                  <div class="flex-row justify-between">
                    <span class="font">{{ item.num }}个诺丽果</span>
                    <span class="font_2">{{ item.shiji_jifen }}购物积分</span>
                  </div>
                  <div class="mt-10 flex-row justify-between">
                    <div class="flex-row items-center self-start">
                      <img class="shrink-0 image_4" src="https://shops.cg500.com/static/newimg/17108378647117336336.png" />
                      <span class="font_3 ml-4-5">{{ item.time }}</span>
                    </div>
                    <div class="flex-col justify-start items-center text-wrapper button" @click="shopNow(item.id)">
                      <span v-if="tabId == 0" class="font_4">立即购买</span>
                      <span v-if="tabId == 1" class="font_4">立即售出</span>
                    </div>
                  </div>
                </div>
              </div>
            </van-tab>
          </van-tabs>
        </div>
        <van-dialog v-model="show" title="温馨提示" show-cancel-button="false" showCancelButton="false" @confirm="confirm" confirmButtonColor="#f6ce54">
          <div class="dia">购买{{ nlg_num }}的诺丽果需扣除{{ nlg_jifen }}的购物积分</div>
        </van-dialog>
      </div>
      <!-- <div class="jimai">明细</div>
      <div class="jimai" v-if="tabId == 0" @click="commission">我要寄卖</div>
      <div class="jimai" v-if="tabId == 1" @click="qiugouClick">我要求购</div> -->
    </div>
  </div>
</template>
<script>
import { scrollMixin } from "../../utils/mixin";
import { Toast } from "vant";
export default {
  mixins: [scrollMixin], //加载更多
  components: {},
  props: {},
  data() {
    return {
      items: [],
      show: false,
      tabId: 0,
      isLoadMore: true,
      page: 1,
      total_page: 0,
      nlg_num: 0,
      nlg_jifen: 0,
      buy_id: "",
      newUid: "" //uid
    };
  },
  activated() {
    window.scrollTo(0, 0);
    this.getData();
  },
  methods: {
    // 返回上一页
    goBack() {
      this.$router.go(-1);
    },
    toNlgMingxi(){
      this.$router.push(this.fun.getUrl("nlgmingxi"))
    },
    confirm() {
      console.log("pppppppppppp");
      $http
        .get(
          "Nuoli.goumai",
          {
            uid: localStorage.getItem("uid"),
            id: this.buy_id
          },
          "..."
        )
        .then(res => {
          if (res.data == "1") {
            this.$toast("购买成功");
            this.getData();
          } else {
            Toast(res.msg);
            return;
          }
          console.log(res, "走了吗走了吗走了吗走了吗走了吗");
        });
    },
    initData() {
      this.page = 1;
      this.isLoadMore = true;
      this.total_page = 0;
    },
    getData() {
      this.initData();
      $http
        .get(
          "Nuoli.nuolilist",
          {
            type: this.tabId + 1
          },
          "..."
        )
        .then(response => {
          // this.items = res.data.data;
          Toast.clear();
          if (response.result !== 1) {
            Toast(response.msg);
            return;
          }
          if (response.result === 1) {
            this.items = response.data.data;
            this.isLoadMore = true;
            this.total_page = response.data.last_page;
            if (!this.total_page) {
              this.total_page = 0;
            }
          }
          console.log(response.data.data, "走了吗走了吗走了吗走了吗走了吗");
        });
    },
    //获取更多数据
    getMoreData() {
      console.log("hongbao", this.isLoadMore);
      if (!this.isLoadMore) return;
      this.isLoadMore = false; // 防止多次请求分页数据
      if (this.page >= this.total_page) {
        return;
      } else {
        this.page += 1;
        let json = {
          type: this.tabId + 1
        };
        let _url = "Nuoli.nuolilist";
        $http.post(_url, json).then(response => {
          if (response.result === 1) {
            console.log(response.data, "data");
            var nextPageData = response.data.data;
            this.items = [...this.items, ...nextPageData];
            this.isLoadMore = true;
            console.log(this.items, "ffdfdd");
          } else {
            this.page = this.page - 1;
            this.isLoadMore = false;
          }
        });
      }
    },
    //我要寄卖
    commission() {
      this.$router.push(this.fun.getUrl("commission", {}));
    },
    //我要求购
    qiugouClick() {
      this.$router.push(this.fun.getUrl("purchase", {}));
    },
    onClick(name, id) {
      this.page = 1;
      this.isLoadMore = true;
      this.total_page = 0;
      this.tabId = name;
      this.getData();
    },
    // 购买
    buy(id, item) {
      console.log(id, item, "看看id是啥");
      this.nlg_num = item.num;
      this.nlg_jifen = item.shiji_jifen;
      this.buy_id = id;

      this.show = true;
    },
    //求购购买
    shopNow(id) {
      console.log(id, "看看id是啥");
      $http
        .get(
          "Nuoli.qiugougoumai",
          {
            uid: localStorage.getItem("uid"),
            id: id
          },
          "..."
        )
        .then(res => {
          if (res.data == "1") {
            this.$toast("成功");
            this.getData();
          } else {
            Toast(res.msg);
            return;
          }
          console.log(res, "走了吗走了吗走了吗走了吗走了吗");
        });
      // this.show = true;
    }
  }
};
</script>
<style scoped>
/************************************************************
** 请将全局样式拷贝到项目的全局 CSS 文件或者当前页面的顶部 **
** 否则页面将无法正常显示                                  **
************************************************************/

html {
  font-size: 16px;
}

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", "Microsoft Yahei", sans-serif;
}

body * {
  box-sizing: border-box;
  flex-shrink: 0;
}
.jimai {
  /* position: fixed;
  top: 13px;
  right: 13px; */
  font-family: PingFang SC;
  font-weight: 500;
  font-size: 14px;
  color: #ff692e;
  /* margin-left: 10px; */
}
/* .jimai1 {
  position: fixed;
  top: 13px;
  right: 33px;
  font-family: PingFang SC;
  font-weight: 500;
  font-size: 28rpx;
  color: #ff692e;
} */
.dia {
  width: 240px;
  height: 75px;
  margin: auto;
  display: flex;
  justify-content: center;
  align-items: center;
}
/deep/ .van-tabs__nav {
  background-color: rgba(0, 0, 0, 0) !important;
}

/* /deep/.van-tab--active {
  margin: 20px !important;
} */
/deep/.van-tabs__line {
  background-color: #f6ce54 !important;
}

/deep/.van-tab {
  width: 80px !important;
  height: 44px !important;
}

.qwe {
  width: 349px;
  height: 100%;
  margin-left: 10px;
  margin-top: 10px;
}

#app {
  width: 100vw;
  height: 100vh;
}

.flex-row {
  display: flex;
  flex-direction: row;
}

.flex-col {
  display: flex;
  flex-direction: column;
}

.justify-start {
  justify-content: flex-start;
}

.justify-end {
  justify-content: flex-end;
}

.justify-center {
  justify-content: center;
}

.justify-between {
  justify-content: space-between;
}

.justify-around {
  justify-content: space-around;
}

.justify-evenly {
  justify-content: space-evenly;
}

.items-start {
  align-items: flex-start;
}

.items-end {
  align-items: flex-end;
}

.items-center {
  align-items: center;
}

.items-baseline {
  align-items: baseline;
}

.items-stretch {
  align-items: stretch;
}

.self-start {
  align-self: flex-start;
}

.self-end {
  align-self: flex-end;
}

.self-center {
  align-self: center;
}

.self-baseline {
  align-self: baseline;
}

.self-stretch {
  align-self: stretch;
}

.flex-1 {
  flex: 1 1 0%;
}

.flex-auto {
  flex: 1 1 auto;
}

.grow {
  flex-grow: 1;
}

.grow-0 {
  flex-grow: 0;
}

.shrink {
  flex-shrink: 1;
}

.shrink-0 {
  flex-shrink: 0;
}

.relative {
  position: relative;
}

.ml-2 {
  margin-left: 0.13rem;
}

.mt-2 {
  margin-top: 0.13rem;
}

.ml-4 {
  margin-left: 0.25rem;
}

.mt-4 {
  margin-top: 0.25rem;
}

.ml-6 {
  margin-left: 0.38rem;
}

.mt-6 {
  margin-top: 0.38rem;
}

.ml-8 {
  margin-left: 0.5rem;
}

.mt-8 {
  margin-top: 0.5rem;
}

.ml-10 {
  margin-left: 0.63rem;
}

.mt-10 {
  margin-top: 0.63rem;
}

.ml-12 {
  margin-left: 0.75rem;
}

.mt-12 {
  margin-top: 0.75rem;
}

.ml-14 {
  margin-left: 0.88rem;
}

.mt-14 {
  margin-top: 0.88rem;
}

.ml-16 {
  margin-left: 1rem;
}

.mt-16 {
  margin-top: 1rem;
}

.ml-18 {
  margin-left: 1.13rem;
}

.mt-18 {
  margin-top: 1.13rem;
}

.ml-20 {
  margin-left: 1.25rem;
}

.mt-20 {
  margin-top: 1.25rem;
}

.ml-22 {
  margin-left: 1.38rem;
}

.mt-22 {
  margin-top: 1.38rem;
}

.ml-24 {
  margin-left: 1.5rem;
}

.mt-24 {
  margin-top: 1.5rem;
}

.ml-26 {
  margin-left: 1.63rem;
}

.mt-26 {
  margin-top: 1.63rem;
}

.ml-28 {
  margin-left: 1.75rem;
}

.mt-28 {
  margin-top: 1.75rem;
}

.ml-30 {
  margin-left: 1.88rem;
}

.mt-30 {
  margin-top: 1.88rem;
}

.ml-32 {
  margin-left: 2rem;
}

.mt-32 {
  margin-top: 2rem;
}

.ml-34 {
  margin-left: 2.13rem;
}

.mt-34 {
  margin-top: 2.13rem;
}

.ml-36 {
  margin-left: 2.25rem;
}

.mt-36 {
  margin-top: 2.25rem;
}

.ml-38 {
  margin-left: 2.38rem;
}

.mt-38 {
  margin-top: 2.38rem;
}

.ml-40 {
  margin-left: 2.5rem;
}

.mt-40 {
  margin-top: 2.5rem;
}

.ml-42 {
  margin-left: 2.63rem;
}

.mt-42 {
  margin-top: 2.63rem;
}

.ml-44 {
  margin-left: 2.75rem;
}

.mt-44 {
  margin-top: 2.75rem;
}

.ml-46 {
  margin-left: 2.88rem;
}

.mt-46 {
  margin-top: 2.88rem;
}

.ml-48 {
  margin-left: 3rem;
}

.mt-48 {
  margin-top: 3rem;
}

.ml-50 {
  margin-left: 3.13rem;
}

.mt-50 {
  margin-top: 3.13rem;
}

.ml-52 {
  margin-left: 3.25rem;
}

.mt-52 {
  margin-top: 3.25rem;
}

.ml-54 {
  margin-left: 3.38rem;
}

.mt-54 {
  margin-top: 3.38rem;
}

.ml-56 {
  margin-left: 3.5rem;
}

.mt-56 {
  margin-top: 3.5rem;
}

.ml-58 {
  margin-left: 3.63rem;
}

.mt-58 {
  margin-top: 3.63rem;
}

.ml-60 {
  margin-left: 3.75rem;
}

.mt-60 {
  margin-top: 3.75rem;
}

.ml-62 {
  margin-left: 3.88rem;
}

.mt-62 {
  margin-top: 3.88rem;
}

.ml-64 {
  margin-left: 4rem;
}

.mt-64 {
  margin-top: 4rem;
}

.ml-66 {
  margin-left: 4.13rem;
}

.mt-66 {
  margin-top: 4.13rem;
}

.ml-68 {
  margin-left: 4.25rem;
}

.mt-68 {
  margin-top: 4.25rem;
}

.ml-70 {
  margin-left: 4.38rem;
}

.mt-70 {
  margin-top: 4.38rem;
}

.ml-72 {
  margin-left: 4.5rem;
}

.mt-72 {
  margin-top: 4.5rem;
}

.ml-74 {
  margin-left: 4.63rem;
}

.mt-74 {
  margin-top: 4.63rem;
}

.ml-76 {
  margin-left: 4.75rem;
}

.mt-76 {
  margin-top: 4.75rem;
}

.ml-78 {
  margin-left: 4.88rem;
}

.mt-78 {
  margin-top: 4.88rem;
}

.ml-80 {
  margin-left: 5rem;
}

.mt-80 {
  margin-top: 5rem;
}

.ml-82 {
  margin-left: 5.13rem;
}

.mt-82 {
  margin-top: 5.13rem;
}

.ml-84 {
  margin-left: 5.25rem;
}

.mt-84 {
  margin-top: 5.25rem;
}

.ml-86 {
  margin-left: 5.38rem;
}

.mt-86 {
  margin-top: 5.38rem;
}

.ml-88 {
  margin-left: 5.5rem;
}

.mt-88 {
  margin-top: 5.5rem;
}

.ml-90 {
  margin-left: 5.63rem;
}

.mt-90 {
  margin-top: 5.63rem;
}

.ml-92 {
  margin-left: 5.75rem;
}

.mt-92 {
  margin-top: 5.75rem;
}

.ml-94 {
  margin-left: 5.88rem;
}

.mt-94 {
  margin-top: 5.88rem;
}

.ml-96 {
  margin-left: 6rem;
}

.mt-96 {
  margin-top: 6rem;
}

.ml-98 {
  margin-left: 6.13rem;
}

.mt-98 {
  margin-top: 6.13rem;
}

.ml-100 {
  margin-left: 6.25rem;
}

.mt-100 {
  margin-top: 6.25rem;
}

.mt-24-5 {
  margin-top: 1.53rem;
}

.mt-15 {
  margin-top: 0.94rem;
}

.ml-4-5 {
  margin-left: 0.28rem;
}

.page {
  padding-bottom: 6.09rem;
  background-color: #fafafa;
  height: 100%;
  width: 100%;
  overflow-y: auto;
  overflow-x: hidden;
}

.section {
  padding: 1.03rem 0.63rem 8rem;
  background-image: linear-gradient(0deg, #fafafa 0%, #fafafa 38%, #fcf8eb 78%, #fff6db 100%);
}

.image {
  margin-left: 1.25rem;
  margin-right: 0.47rem;
  width: 20.47rem;
  height: 0.75rem;
}

.image_2 {
  width: 0.63rem;
  height: 1.09rem;
}

.group {
  margin-left: 6.78rem;
}

.text {
  color: #151515;
  font-size: 1.13rem;
  font-family: PingFang SC;
  line-height: 1.13rem;
}

.image_3 {
  margin-top: -0.22rem;
  border-radius: 0rem 0.13rem 0.13rem 0rem;
  width: 2.16rem;
  height: 0.5rem;
}

.text_3 {
  color: #151515;
  font-size: 0.94rem;
  font-family: PingFang SC;
  line-height: 0.88rem;
}

.text_2 {
  margin-left: 2.5rem;
  color: #ff692e;
  font-size: 0.88rem;
  font-family: PingFang SC;
  font-weight: 500;
  line-height: 0.84rem;
}

.list {
  margin-top: -6.53rem;
  padding: 0 0.94rem;
}

.list-item {
  padding: 1.31rem 0.75rem 1rem 0.94rem;
  background-color: #ffffff;
  border-radius: 0.5rem;
}

.list-item:first-child {
  margin-top: 0;
}

.font {
  font-size: 14px;
  font-family: PingFang SC;
  line-height: 0.97rem;
  font-weight: 500;
  color: #151515;
}

.font_2 {
  font-size: 14px;
  font-family: PingFang SC;
  line-height: 0.97rem;
  font-weight: 500;
  color: #ff692e;
}

.image_4 {
  width: 0.72rem;
  height: 0.72rem;
}

.font_3 {
  font-size: 0.75rem;
  font-family: PingFang SC;
  line-height: 0.59rem;
  color: #777777;
}

.text-wrapper {
  margin-right: 0.13rem;
}

.button {
  padding: 0.5rem 0;
  background-color: #f6ce54;
  border-radius: 0.84rem;
  width: 5.28rem;
  height: 1.69rem;
}
/* .text-wrapper {
  margin-right: 0.13rem;
} */

.button1 {
  padding: 0.5rem 0;
  background-color: #f6ce54;
  border-radius: 0.84rem;
  width: 4.28rem;
  height: 1.69rem;
}

.font_4 {
  font-size: 0.75rem;
  font-family: PingFang SC;
  line-height: 0.72rem;
  font-weight: 500;
  color: #111111;
}
</style>
